<template>
	<div class="marker-main">
		<div class="marker-box">
			<h4>今日市值：{{ marketValue }}</h4>
			<div class="marker-echart" ref="viewEachrt"></div>
			<van-tabs type="card" @click="checkBox"><van-tab v-for="list in dataArr" :key="list.value" :title="list.text"></van-tab></van-tabs>
			<h2>期权股分红：{{ bonusAmt }}</h2>
			<h3>股票分红：0</h3>
		</div>
	</div>
</template>

<script>
import Vue from 'vue';
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
import { getFinancialInfo } from '@/api/';
import moment from 'moment';
export default {
	data() {
		return {
			key: '',
			bonusAmt: 0,
			marketValue: 0,
			dataArr: [
				{
					value: 1,
					text: '近1月'
				},
				{
					value: 3,
					text: '近3月'
				},
				{
					value: 6,
					text: '近6月'
				},
				{
					value: 12,
					text: '近1年'
				}
			]
		};
	},
	created() {
		//获取走势图数据
		let vm = this;
		let script = document.createElement('script');
		script.type = 'text/javascript';
		let s = moment().format("YYYY-MM-DD HH:mm:ss")
		let t1 = s.split(' ')[0]
		let t2 = s.split(' ')[1]
		let time = t1.replace(/-/g, '')
		time += t2.replace(/:/g, '')
		//script.src = `${process.env.VUE_APP_SERVE_URL}storage/005284.js`;
		script.src = `http://fund.eastmoney.com/pingzhongdata/002965.js?v=${time}`
		document.getElementsByTagName('head')[0].appendChild(script);
		script.onload = function() {
			vm.marketValue = Data_ACWorthTrend[Data_ACWorthTrend.length - 1][1]
			vm.checkDate(1);
		};
	},
	mounted() {
		document.title = '走势';
		if (localStorage.getItem('userInfo')) {
			getFinancialInfo({})
				.then(res => {
					if (res.code === 200 && res.data) {
						this.bonusAmt = res.data.bonusAmt;
					}
				})
				.catch(() => {});
		}
	},
	methods: {
		checkBox(row) {
			this.checkDate(row === 0 ? 1 : row === 1 ? 3 : row === 2 ? 6 : 12)
		},
		checkDate(t) {
			const et = Data_ACWorthTrend[Data_ACWorthTrend.length - 1][0] + 86400;
			const st = moment(new Date())
				.subtract(t, 'months')
				.format('YYYY-MM-DD');

			let data = Data_ACWorthTrend.filter(d => moment(d[0]).isBetween(st, et))
				.sort(d => moment(d[0]).valueOf())
				.map(d => {
					d._date = moment(d[0]).format('YYYY-MM-DD');
					return d;
				});
			const arr = data.map(kl => {
				return {
					time: moment(kl[0]).format('YYYY-MM-DD'),
					value: kl[1]
				};
			});
			this.init(arr);
		},
		init(list) {
			const dates = list.map(kl => {
				return kl.time;
			});
			const row = list.map(kt => {
				return kt.value;
			});
			let option = {
				legend: {
					show: false,
					data: ['日K', 'MA5'],
					inactiveColor: '#777',
					textStyle: {
						color: '#fff'
					}
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						animation: false,
						type: 'cross',
						lineStyle: {
							color: '#376df4',
							width: 2,
							opacity: 1
						}
					}
				},
				xAxis: {
					type: 'category',
					data: dates,
					axisLine: { lineStyle: { color: '#8E611F' } }
				},
				yAxis: {
					scale: true,
					axisLine: { lineStyle: { color: '#8E611F' } },
					splitLine: { show: false }
				},
				grid: {
					bottom: 30
				},
				animation: true,
				series: [
					// {
					// 	type: 'candlestick',
					// 	name: '日K',
					// 	data: data,
					// 	itemStyle: {
					// 		color: '#FD1050',
					// 		color0: '#0CF49B',
					// 		borderColor: '#FD1050',
					// 		borderColor0: '#0CF49B'
					// 	}
					// },
					{
						name: '市值',
						type: 'line',
						data: row,
						smooth: true,
						showSymbol: false,
						lineStyle: {
							width: 1
						}
					}
					// {
					// 	name: 'MA10',
					// 	type: 'line',
					// 	data: this.calculateMA(10, data),
					// 	smooth: true,
					// 	showSymbol: false,
					// 	lineStyle: {
					// 		width: 1
					// 	}
					// },
					// {
					// 	name: 'MA20',
					// 	type: 'line',
					// 	data: this.calculateMA(20, data),
					// 	smooth: true,
					// 	showSymbol: false,
					// 	lineStyle: {
					// 		width: 1
					// 	}
					// },
					// {
					// 	name: 'MA30',
					// 	type: 'line',
					// 	data: this.calculateMA(30, data),
					// 	smooth: true,
					// 	showSymbol: false,
					// 	lineStyle: {
					// 		width: 1
					// 	}
					// }
				]
			};
			this.instance = this.$echarts.init(this.$refs.viewEachrt);
			this.instance.setOption(option);
			this.instance.resize();
		},
		calculateMA(dayCount, data) {
			let result = [];
			for (let i = 0, len = data.length; i < len; i++) {
				if (i < dayCount) {
					result.push('-');
					continue;
				}
				let sum = 0;
				for (let j = 0; j < dayCount; j++) {
					sum += data[i - j][1];
				}
				result.push(sum / dayCount);
			}
			return result;
		}
	}
};
</script>

<style scoped lang="less">
.marker-main {
	height: calc(100vh);
	background: #fff;
	position: relative;
	box-sizing: border-box;
	background: url(../../assets/images/bg_home.png) no-repeat;
	background-size: 100%;
	.marker-box{
		position: absolute;
		left: 2%;
		right: 2%;
		top: 50%;
		margin: -350px auto 0 auto;
		box-sizing: border-box;
		height: 700px;
		.marker-echart {
			width: calc(100%);
			height: 500px;
			margin-bottom: 20px;
		}
		>h4{
			text-align: center;
			color: #8e611f;
			font-size: 30px;
			position: relative;
			bottom: -30px;
		}
		> h2 {
			text-align: center;
			color: #8e611f;
			font-size: 28px;
			padding: 8% 0 3% 0;
		}
		> h3 {
			text-align: center;
			color: #8e611f;
			font-size: 26px;
		}
	}
	
}
</style>
<style>
	.marker-box .van-tabs__nav--card{
		background: transparent;
		border: 0 none;
	}
	.marker-box .van-tabs__nav--card .van-tab {
	    color: #8E611F;
	    border-right: 0 none;
	}
	.marker-box .van-tabs__nav--card .van-tab.van-tab--active{
		width: 70%;
		background: #f98a42b5;
		margin: 0 auto;
		border-radius: 6px;
		color: #fff;
	}
</style>